<div [hidden]="submitted">
  <h1>Hero Form</h1>
  <form #heroForm="ngForm" (ngSubmit)="onSubmit()">
    <mat-form-field>
      <input type="text" matInput placeholder="Name" required
             [(ngModel)]="model.name" name="name" #name="ngModel">
      <mat-error>Name is required</mat-error>
      <!--<mat-error *ngIf="name.valid || name.pristine">Name is required</mat-error>-->
    </mat-form-field>

    <mat-form-field>
      <input type="text" matInput placeholder="Alter Ego"
             [(ngModel)]="model.alterEgo" name="alterEgo">
    </mat-form-field>

    <mat-form-field>
      <mat-select placeholder="Power" required [(ngModel)]="model.power" name="power">
        <mat-option *ngFor="let pow of powers" [value]="pow">{{pow}}</mat-option>
      </mat-select>
    </mat-form-field>

    <div>
      <button type="submit" mat-raised-button color="accent"
              [disabled]="heroForm.form.invalid">Submit
      </button>
      <button type="reset" mat-button (click)="newHero();">New Hero</button>
    </div>
  </form>
</div>
<div>{{model | json}}</div>

<div [hidden]="!submitted">
  <h2>You submitted the following:</h2>
  <div class="list">
    <div>Name</div>
    <div>{{model.name}}</div>

    <div>Alter Ego</div>
    <div>{{model.alterEgo}}</div>

    <div>Power</div>
    <div>{{model.power}}</div>
  </div>
  <button mat-raised-button color="primary" (click)="submitted=false">Edit</button>
</div>
